Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(astro-org): optimise and display relative content images #104

Open
wants to merge 18 commits into
base: master
Choose a base branch
from

Conversation

venikx
Copy link
Contributor

@venikx venikx commented Apr 11, 2024

Que?

I'm probably breaking plenty of the cases with the semi re-write, but I found the way the plugins were being handled a bit odd. Especially, with the extra vite config and what not. As a partial result the surface api of the astro plugin has been changed during the process.

What's supported?

  • astro v4
  • relative images, via [[./hello.jpg]], make astro pick them up, and dump them in _astro to be served

Some questions

I noticed midway through the "parsing" that current implementation was dumping jsx stringified snippets into the ast. Was this an purpose for a use-case I'm not aware of? I remember https://github.com/orgapp/orgajs had the capability to generate jsx components from org-mode.

It also was doing something hacky with regards to vite/rollup. Was it supporting a specific use-case I should be aware of?
Possibly relevant for @ispringle as well maybe?

Is this site live somewhere?

I tested this out on my own site: https://github.com/venikx/venikx.com/blob/main/src/lib/astro-org.ts (copy of astro-org source), configured via https://github.com/venikx/venikx.com/blob/main/astro.config.ts. The org-mode in question is here: https://github.com/venikx/venikx.com/blob/main/src/content/blog/handmade-hero-nixos/index.org and the site is live here: https://venikx.com/posts/handmade-hero-nixos/

Copy link

changeset-bot bot commented Apr 11, 2024

🦋 Changeset detected

Latest commit: 0ffc106

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages
Name Type
astro-org Major
@uniorgjs/astro-example Major
uniorg-rehype Minor
@uniorgjs/orgx Patch
rollup-plugin-orgx Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

vercel bot commented Apr 11, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
org-blog-starter ✅ Ready (Inspect) Visit Preview 💬 Add feedback Apr 15, 2024 10:53am

Copy link

codecov bot commented Apr 11, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.32%. Comparing base (466fd42) to head (8ae3a2b).

❗ Current head 8ae3a2b differs from pull request most recent head 0ffc106. Consider uploading reports for the commit 0ffc106 to get more accurate results

Additional details and impacted files
@@           Coverage Diff           @@
##           master     #104   +/-   ##
=======================================
  Coverage   96.32%   96.32%           
=======================================
  Files          15       15           
  Lines        1822     1822           
  Branches      601      601           
=======================================
  Hits         1755     1755           
  Misses         66       66           
  Partials        1        1           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@venikx
Copy link
Contributor Author

venikx commented Apr 11, 2024

@rasendubi How are you using the ids in astro?

data: frontmatter,
data: {
...frontmatter,
metadata: f.data.astro,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should have access into your content collection for the ids now.

...orgPlugin({
...options,
uniorgPlugins,
rehypePlugins: [
Copy link
Contributor Author

@venikx venikx Apr 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To be honest, I'm not sure what this was doing precisely. I completely escaped orgx as I didn't understand the magic it's doing. Regardless, the rollup-plugin doesn't seem required anymore.

@venikx venikx changed the title feat(astro-org): optimising relative content images feat(astro-org): optimise and display relative content images Apr 15, 2024
@rasendubi
Copy link
Owner

Hey. Sorry, for the long reply

As you seem to have noticed, this PR is breaking orgx support (dumping JSX). This is used to allow users to override standard components from Astro (e.g., overriding <a> to enable pre-loading)

Another example where this overriding is helpful is to override <img> to enable Astro's image optimization. Here's an example implementation I use on my website: oleksii.shmalko.com/src/components/Image.astro and here's how to install it.

This rehype plugin might be relevant for resolving relative links (to images, other pages, and downloadable files). It searches for relative links and replaces them with imports. Probably worth adding it to astro-org package.

@rasendubi
Copy link
Owner

Another note is that astro-org is mostly a copy-paste-edit from @astrojs/mdx (although from an earlier version), which might explain some of the weirdness you see. If possible, I would like to keep them similar which helps with adapting new fixes and features from @astrojs/mdx.

I just took a look and it seems that @astrojs/mdx has also grown to handle images better. See this plugin.

@venikx
Copy link
Contributor Author

venikx commented Sep 17, 2024

I haven't forgotten about this yet, I'm down to making the suggested changes, but I'm currently studying for 3 AWS Certifications after work. So, kind of locked in terms of time at the moment. Currently, this isn't a super blocker, since I have the required changes on my site, and it is working. I've also seen another possible way of handling things, using some sort of link replacement once the html is already generated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants